<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <style>
        .top{
        vertical-align: top;
        width: 50%;
        }
        .bold{
        font-weight: bold;
        }
    </style>
    <ui:define name="title">
        Search Member
    </ui:define>
    <ui:define name="body">
        <h:panelGrid columns="2" columnClasses="top,top" width="60%">
            <h:form>

                <rich:tree
                        var="node"
                        toggleType="ajax"
                        selectionType="ajax"
                        selectionChangeListener="#{fileSystemBean.processTreeSelectionChange}"
                        toggleListener="#{fileSystemBean.processTreeToggle}"
                        nodeType="#{node.type}">

                    <rich:treeModelRecursiveAdaptor roots="#{fileSystemBean.rootDrives}" nodes="#{node.directories}" leaf="#{node.leaf}">
                        <rich:treeNode type="drive" iconCollapsed="../images/drive.png" iconExpanded="../images/drive.png" iconLeaf="../images/drive.png">
                            <h:outputText value="#{node.name}"/>
                        </rich:treeNode>
                        <rich:treeNode type="directory" iconCollapsed="../images/folder.png" iconExpanded="../images/folder.png" iconLeaf="../images/folder.png">
                            <h:outputText value="#{node.name}"/>
                        </rich:treeNode>
                    </rich:treeModelRecursiveAdaptor>
                </rich:tree>
            </h:form>
            <a4j:outputPanel ajaxRendered="true" layout="block">
                <rich:panel header="Current Selection"
                            rendered="#{not empty treeBean.currentSelection}">
                    <h:outputText value="Name:" />
                    <h:outputText value="#{treeBean.currentSelection.name}" />
                    <h:panelGroup rendered="#{treeBean.currentSelection.leaf}">
                        <fieldset><legend>Details</legend> <h:panelGrid columnClasses="bold"
                                                                        columns="2">
                            <h:outputText value="Country:" />
                            <h:outputText value="#{treeBean.currentSelection.company.country}" />
                            <h:outputText value="Company:" />
                            <h:outputText value="#{treeBean.currentSelection.company}" />
                            <h:outputText value="Artist:" />
                            <h:outputText value="#{treeBean.currentSelection.artist}" />
                            <h:outputText value="Price:" />
                            <h:outputText value="#{treeBean.currentSelection.price}">
                                <f:convertNumber type="currency" currencyCode="USD"/>
                            </h:outputText>
                            <h:outputText value="Year:" />
                            <h:outputText value="#{treeBean.currentSelection.year}" />
                        </h:panelGrid></fieldset>
                    </h:panelGroup>
                </rich:panel>
            </a4j:outputPanel>
        </h:panelGrid>
    </ui:define>
</ui:composition>